<template>
	<view class="order">
		<statusBar />
		<!-- 设置 -->
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>商品-管理</view>
		</view>
		<!-- 全部 -->
		<view class="search">
			<view class="been">
				<view :class="active === index ? 'type-list-item active' : 'type-list-item'" v-for="(item, index) in list" :key="index" @click="active = index">
					<view>{{ item.goods }}</view>
					<text>{{ item.number }}</text>
				</view>
			</view>
		</view>
		<view class="contract">
			<view class="u-wrap">
				<view class="u-menu-wrap">
					<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
						<!-- 老子左侧第一次for循环 -->
						<view
							v-for="(item, index) in tabbar"
							:key="index"
							class="u-tab-item"
							:class="[current == index ? 'u-tab-item-active' : '']"
							:data-current="index"
							@tap.stop="swichMenu(index)"
						>
							<text class="u-line-1">{{ item.name }}</text>
						</view>
					</scroll-view>
					<!-- 右侧老子第二次for循环 -->
					<block v-for="(item, index) in tabbar" :key="index">
						<scroll-view scroll-y class="right-box" v-if="current == index">
							<!-- 右边大盒子 -->
							<view class="class-item">
								<view class="item-title">
									<!-- 选择分类for循环 -->
									<view v-if="index < 3" :class="{ action: typeIndex === index }" v-for="(item, index) in item.food" :key="index" @tap="Add(index)">
										{{ item.name }}
									</view>
									<view class="all" @tap="add">
										<view>全部</view>
										<view class="visone"><image src="../../static/home/jiantouq.png" mode=""></image></view>
									</view>
								</view>
								<!-- 展开全部老子又特么得来一次for循环 -->
								<view class="AccordingAll" v-show="show">
									<view class="allshow">
										<view>
											<view>选择分类</view>
											<view class="imgvis" @tap="fanAdd"><image src="../../static/home/jiantou.png" mode=""></image></view>
										</view>
										<view class="item-title" style="margin-top: 35upx;">
											<view :class="{ action: typeIndex === index }" v-for="(item, index) in item.food" :key="index" @tap="Add(index)">{{ item.name }}</view>
										</view>
									</view>
								</view>

								<view class="item-container">
									<!-- 右侧大框for循环 -->

									<view v-if="dishes == 2"><u-checkbox shape="circle" active-color="#35394B" v-model="item.checked" @tap="checkedAll">全选</u-checkbox></view>
									<view v-if="dishes == 2" class="itemCheck">
										<u-checkbox-group @change="checkboxGroupChange">
											<u-checkbox
												v-for="(item1, index1) in item.foods"
												:key="index1"
												:name="item1.name"
												shape="circle"
												active-color="#35394B"
												v-model="item1.checked"
												@change="checkboxChange"
											></u-checkbox>
										</u-checkbox-group>
									</view>

									<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
										<!-- 右边 -->
										<view class="left_nav" @tap="Editor(item1.id)">
											<!-- 图片 -->
											<image class="item-menu-image" :src="item1.icon" mode="aspectFill"></image>
											<view class="pork">
												<view>
													<view>{{ item1.name }}</view>
													<image src="../../static/setup/jiantou1.png" mode=""></image>
												</view>
												<view>月售0 好评0.00%</view>
												<view>￥{{ item1.price }}</view>
											</view>
										</view>
										<view class="vis" v-if="dishes == 1">
											<view @tap="inventor(item1.stock)">库存{{ item1.stock }}</view>
											<view>下架</view>
											
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</block>
				</view>
			</view> 
		</view>
		<!-- 定位管理分类 -->
		<view class="Location" v-if="dishes == 1">
			<view @tap="classification">管理分类</view>
			<view>
				<view @tap="newmenu">
					<image src="../../static/management/xinjian.png" mode=""></image>
					<text>新建菜品</text>
				</view>
				<view @tap="sorting">
					<image src="../../static/management/paixu.png" mode=""></image>
					<text>排序</text>
				</view>
				<view @tap="batch">
					<image src="../../static/management/piliang.png" mode=""></image>
					<text>批量</text>
				</view>
			</view>
		</view>
		<!-- 上架下架 -->
		<view class="shelves" v-if="dishes == 2">
			<view>上架</view>
			<view>下架</view>
			<view @tap="Modify">修改库存</view>
			<view @tap="More">更多操作</view>
		</view>
		<!-- 库存弹出层 -->
		<u-popup v-model="ejection" mode="bottom" border-radius="20">
			<view class="layer">
				<view>剩余库存</view>
				<view>宫保鸡丁盖浇饭</view>
				<!-- 清零 -->
				<view>
					<view><input v-model="remaining" type="text" value="" placeholder="0" /></view>
					<view>
						<view @tap="reset">清零</view>
						<view @tap="largest">设为最大({{ this.biggest }})份</view>
					</view>
				</view>
				<view>保存</view>
			</view>
		</u-popup>

		<!-- 新建菜单弹出层 -->
		<view class="menu">
			<u-popup v-model="Packup" mode="bottom">
				<view class="Foodsold">
					<view>
						<view @tap="Merchandise">急速录入</view>
						<view @tap="manually">手动填写商品信息</view>
					</view>
					<view @tap="close">取消</view>
				</view>
			</u-popup>
		</view>

		<!-- 置满 -->
		<view class="menu">
			<u-popup v-model="Filling" mode="bottom">
				<view class="Foodsold">
					<view>
						<view>置满</view>
						<view>沽清</view>
						<view @tap="cust">自定义</view>
					</view>
					<view>取消</view>
				</view>
			</u-popup>
		</view>

		<!-- 更多操作弹出层 -->
		<view class="menu">
			<u-popup v-model="eject" mode="bottom">
				<view class="Foodsold">
					<view>
						<view>修改餐盒费</view>
						<view>移动分类</view>
						<view>修改规格</view>
						<view>修改属性</view>
						<view>修改售卖时间</view>
						<view>修改商品描述</view>
						<view>修改最小购买量和单位</view>
						<view>删除</view>
					</view>
					<view>取消</view>
				</view>
			</u-popup>
		</view>
		<!-- 自定义库存 -->
		<view class="Custom">
			<u-popup v-model="inventory" mode="bottom">
				<view class="Custom_nav">
					<view>取消</view>
					<view>自定义库存</view>
					<view>确定</view>
				</view>
				<!-- 当前库存 -->
				<view class="invent">
					<view>当前库存</view>
					<input type="text" value="" placeholder="0" />
				</view>

				<!-- 最大库存 -->
				<view class="invent">
					<view>最大库存</view>
					<input type="text" value="" placeholder="0" />
				</view>
				<!-- 库存次日置满 -->
				<view class="inventevn">
					<view>
						<view>库存次日置满</view>
						<image src="../../static/management/yiwen.png" mode=""></image>
					</view>
					<u-switch active-color="#333333" v-model="switchFalse"></u-switch>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			list: [{ goods: '全部', number: '19' }, { goods: '已下架', number: '4' }, { goods: '库存不足', number: '3' }, { goods: '待上架', number: '0' }],
			active: 0,
			tabbar: [],
			scrollTop: 0, //tab标题的滚动条位置
			current: 0, // 预设当前项的值
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0, // 左边菜单item的高度
			typeIndex: 0,
			show: false,
			ejection: false, //库存
			remaining: 0,
			// biggest: 999,
			Packup: false, //新建菜单弹出层
			dishes: 1, //管理分类
			id: '',
			group: '',
			checked: false,
			inventory: false, //自定义库存
			Filling: false, //置满
			switchFalse: false,
			eject: false, //更多操作弹出层
			biggest:"",//库存
		};
	},
	components: {
		statusBar
	},

	created() {
		this.getList();
	},
	methods: {
		// 接口
		getList() {
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});
			request('/merchant/food/get-food-list', 'post', {}).then(res => {
				console.log(res.data);
				if (res.data.code == 1) {
					this.tabbar = res.data.data;
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
				try {
					this.tabbar = res.data.data;
				} catch (e) {
					this.tabbar = JSON.parse(res.data).data;
				}
			});
		},

		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		add() {
			this.show = true;
		},
		fanAdd() {
			this.show = false;
		},
		Add(index) {
			this.typeIndex = index;
			this.show = false;
		},
		// 库存
		inventor(num) {
			// 库存
			this.biggest = num
			this.ejection = true;
		},
		// 设置最大
		largest() {
			this.remaining = this.biggest;
		},
		// 清零
		reset() {
			this.remaining = 0;
		},
		// 打开新建菜单
		newmenu() {
			this.Packup = true;
		},
		// 新建菜单关闭
		close() {
			this.Packup = false;
		},
		// 批量
		batch() {
			this.dishes = 2;
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			this.group = e; //数组
			// this.id = e1; //id
			console.log(this.group, '数组');
			// console.log(this.id, 1122);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			this.group = e; //数组
			// this.id = e1; //id
			console.log(this.group, '数组');
			// console.log(this.id, 1122);
		},
		// 全选
		checkedAll(e) {
			this.group = e
			console.log(this.group, 33333);
			this.group.map(val => {
				val.checked = true;
			})
		},
		// 急速录用
		Merchandise() {
			uni.navigateTo({
				url: '/pages/Management/Merchandise'
			});
		},
		// 商品编辑
		Editor(num) {
			uni.navigateTo({
				url: '/pages/Management/Editor?id=' + num
			});
		},
		// 手动填写
		manually() {
			uni.navigateTo({
				url: '/pages/Management/Editor?type=1'
			});
		},
		
		// 商品分类
		classification() {
			uni.navigateTo({
				url: '/pages/Management/classification'
			});
		},
		// 排序
		sorting() {
			uni.navigateTo({
				url: '/pages/Management/sorting'
			});
		},
		// 修改库存
		Modify() {
			this.Filling = true;
		},
		// 自定义弹出层
		cust() {
			this.Filling = false;
			this.inventory = true;
		},
		// 更多操作
		More() {
			this.eject = true;
		},
		getImg() {
			return Math.floor(Math.random() * 35);
		},
		// 点击左边的栏目切换
		async swichMenu(index) {
			if (index == this.current) return;
			this.current = index;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.' + elClass)
					.fields({ size: true }, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					})
					.exec();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
@import './scss/shelves.scss';
</style>
